<template>
  <view class="search-box">
    <view class="search-left" @click="onScanCode">
      <image
        class="icon"
        src="@/static/images/icon/icon_sys_1.png"
        mode="aspectFill"
        style="width: 24px; height: 24px"
      ></image>
    </view>
    <view class="search">
      <up-search
        searchIcon="/static/images/icon/search.png"
        shape="square"
        :placeholder="placeholder"
        v-model="keyword"
        height="30"
        :showAction="false"
        :disabled="disabled"
        @click="onFocus"
        @search="onSearch"
        @clear="onClear"
      ></up-search>
    </view>
    <view class="search-right" @click="onReplenish">
      <image
        class="icon"
        src="@/static/images/icon/icon_bh_1.png"
        mode="aspectFill"
        style="width: 24px; height: 24px"
      ></image>
      <view class="search-right-text">快速补货</view>
    </view>
  </view>
</template>

<script setup>
import { canNextForStore } from "@/util";

const emits = defineEmits(["scanCode", "replenish", "search", "focus"]);

const props = defineProps({
  placeholder: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const keyword = defineModel({
  type: String,
});

function onScanCode() {
  // 调起条码扫描
  uni.scanCode({
    scanType: ["barCode"],
    success: function (res) {
      console.log("条码类型：" + res.scanType);
      console.log("条码内容：" + res.result);
      uni.navigateTo({
        url: "/pages/goods/list?type=search&keyword=" + res.result,
      });
    },
    fail: function (err) {
      console.log(err);
      uni.showToast({
        title: "识别失败",
        icon: "error",
      });
    },
  });
}

function onClear() {
  keyword.value = "";
  emits("search");
}

function onSearch() {
  emits("search", keyword.value);
}

async function onReplenish() {
  const result = await canNextForStore();
  console.log(result);
  if (result) {
    // 快速补货
    uni.redirectTo({
      url: "/pages/index/replenish",
    });
  }
}

function onFocus() {
  emits("focus");
}
</script>

<style lang="scss" scoped>
.search-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;

  .search {
    flex: 1;
    margin: 0 20rpx;
  }

  .search-right {
    display: flex;
    align-items: center;

    .search-right-text {
      width: 48rpx;
      color: #333333;
      line-height: 26rpx;
      font-size: 24rpx;
      margin-left: 10rpx;
    }
  }

  .icon {
    width: 60rpx;
    height: 60rpx;
    display: block;
  }
}
</style>
